import React, { Component } from 'react';
import classNames from 'classnames';
import {AppTopbar} from './AppTopbar';
import {AppInlineProfile} from './AppInlineProfile';
import {AppFooter} from './AppFooter';
import {AppMenu} from './AppMenu';

import 'primereact/resources/themes/nova-light/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import 'fullcalendar/dist/fullcalendar.css';
import 'font-awesome/css/font-awesome.css';

import './App.css';

import Routes from './routes'

import { ScrollPanel } from 'primereact/components/scrollpanel/ScrollPanel';

class App extends Component {

    constructor() {
        super();
        this.state = {
            layoutMode: 'static',
            profileMode: 'inline',
            layoutCompact: true,
            overlayMenuActive: false,
            staticMenuDesktopInactive: false,
            staticMenuMobileActive: false,
            rotateMenuButton: false,
            topbarMenuActive: false,
            activeTopbarItem: null,
            darkMenu: true,
            menuActive: false,
            theme: 'blue',
            layout: 'blue',
            version: 'v3',
        };
        
        this.onDocumentClick = this.onDocumentClick.bind(this);
        this.onMenuClick = this.onMenuClick.bind(this);
        this.onMenuButtonClick = this.onMenuButtonClick.bind(this);
        this.onTopbarMenuButtonClick = this.onTopbarMenuButtonClick.bind(this);
        this.onTopbarItemClick = this.onTopbarItemClick.bind(this);
        this.onMenuItemClick = this.onMenuItemClick.bind(this);
        this.onRootMenuItemClick = this.onRootMenuItemClick.bind(this);
        this.createMenu();
    }

    onMenuClick(event) {
        this.menuClick = true;

        if(!this.isHorizontal()) {
            setTimeout(() => {this.layoutMenuScroller.moveBar(); }, 500);
        }
    }

    onMenuButtonClick(event) {
        this.menuClick = true;
        this.setState(({
            rotateMenuButton: !this.state.rotateMenuButton,
            topbarMenuActive: false
        }));

        if(this.state.layoutMode === 'overlay') {
            this.setState({
                overlayMenuActive: !this.state.overlayMenuActive
            });
        }
        else {
            if(this.isDesktop())
                this.setState({staticMenuDesktopInactive: !this.state.staticMenuDesktopInactive});
            else
                this.setState({staticMenuMobileActive: !this.state.staticMenuMobileActive});
        }

        event.preventDefault();
    }

    onTopbarMenuButtonClick(event) {
        this.topbarItemClick = true;
        this.setState({topbarMenuActive: !this.state.topbarMenuActive});
        this.hideOverlayMenu();
        event.preventDefault();
    }

    onTopbarItemClick(event) {
        this.topbarItemClick = true;

        if(this.state.activeTopbarItem === event.item)
            this.setState({activeTopbarItem: null});
        else
            this.setState({activeTopbarItem: event.item});

        event.originalEvent.preventDefault();
    }

    onMenuItemClick(event) {
        if(!event.item.items) {
            this.hideOverlayMenu();
        }
        if(!event.item.items && this.isHorizontal()) {
            this.setState({
                menuActive: false
            })
        }
    }
    
    onRootMenuItemClick(event) {
        this.setState({
            menuActive: !this.state.menuActive
        });
        
        event.originalEvent.preventDefault();
    }
    
    onDocumentClick(event) {
        if(!this.topbarItemClick) {
            this.setState({
                activeTopbarItem: null,
                topbarMenuActive: false
            });
        }

        if(!this.menuClick) {
            if(this.isHorizontal() || this.isSlim()) {
                this.setState({
                    menuActive: false
                })
            }
            
            this.hideOverlayMenu();
        }
        
        if(!this.rightPanelClick) {
            this.setState({
                rightPanelActive: false
            })
        }

        this.topbarItemClick = false;
        this.menuClick = false;
        this.rightPanelClick = false;
    }
    
    hideOverlayMenu() {
			this.setState({
				rotateMenuButton: false,
				overlayMenuActive: false,
				staticMenuMobileActive: false
			})
    }

    isTablet() {
			let width = window.innerWidth;
			return width <= 1024 && width > 640;
    }

    isDesktop() {
			return window.innerWidth > 1024;
    }

    isMobile() {
			return window.innerWidth <= 640;
    }

    isOverlay() {
			return this.state.layoutMode === 'overlay';
    }

    isHorizontal() {
			return this.state.layoutMode === 'horizontal';
    }
    
    isSlim() {
			return this.state.layoutMode === 'slim';
    }

    createMenu() {
			this.menu = [
				{
					label: '钱包', 
					icon: 'fa fa-fw fa-bandcamp', 
					command: () => { window.location = "#/wallet"}
				},
				{
					label: '地址本', 
					icon: 'fa fa-fw fa-book', 
					command: () => { window.location = "#/address"}
				},
				{
					label: '行情', 
					icon: 'fa fa-fw fa-bar-chart', 
					command: () => { window.location = "#/market"}
				},
				{
					label: '应用', 
					icon: 'fa fa-fw fa-th-large', 
					command: () => { window.location = "#/dapp"}
				},
				{
					label: 'Test',
					icon: 'fa fa-fw fa-th-large',
					command: () => { window.location = "#/test"}
				},
			]
    }

    render() {
			let layoutClassName = classNames('layout-wrapper', {
					'menu-layout-static': this.state.layoutMode !== 'overlay',
					'menu-layout-overlay': this.state.layoutMode === 'overlay',
					'layout-menu-overlay-active': this.state.overlayMenuActive,
					'menu-layout-slim': this.state.layoutMode === 'slim',
					'menu-layout-horizontal': this.state.layoutMode === 'horizontal',
					'layout-menu-static-inactive': this.state.staticMenuDesktopInactive,
					'layout-menu-static-active': this.state.staticMenuMobileActive
			})

			let menuClassName = classNames('layout-menu-container', {'layout-menu-dark': this.state.darkMenu});
			
			return <div className={layoutClassName}>
								<div>
										<AppTopbar profileMode={this.state.profileMode} horizontal={this.props.horizontal} 
														topbarMenuActive={this.state.topbarMenuActive} activeTopbarItem={this.state.activeTopbarItem}
														onMenuButtonClick={this.onMenuButtonClick} onTopbarMenuButtonClick={this.onTopbarMenuButtonClick} 
														onTopbarItemClick={this.onTopbarItemClick} />

										<div className={menuClassName} onClick={this.onMenuClick}>
												<ScrollPanel ref={(el) => this.layoutMenuScroller = el} style={{height: '100%'}}>
														<div className="menu-scroll-content">
																{(this.state.profileMode === 'inline' && this.state.layoutMode !== 'horizontal') && <AppInlineProfile />}
																<AppMenu model={this.menu} onMenuItemClick={this.onMenuItemClick} onRootMenuItemClick={this.onRootMenuItemClick} 
																				layoutMode={this.state.layoutMode} active={this.state.menuActive} /> 
														</div>
												</ScrollPanel>
										</div>
										
										<div className="layout-main">
												<Routes />
										</div>
										
										<div className="layout-mask"></div>
										
										<AppFooter />
								</div>
							</div>
  }
}

export default App;
